html{
    font-size: 15px;
}
body{
    display: flex;
    background-color: #222;
    justify-content: center;/*盒子在容器中水平对齐*/
    align-items: center;/*盒子中各项垂直对齐*/
    min-height: 100vh;
}
h1{
    color: #333;
    font-family: Helvetica;
    font-size: 8rem;
    margin: 0;
    padding: 0;
    letter-spacing: -0.3rem;/*字间距*/
    position: relative;/*和h1::after伪类的position配合使的两元素重合*/
}
h1::after{
    content: attr(data-sptlight);/*内容设置为html标签中属性为data-sptlight的值*/
    color: transparent;/*渐变的背景图片设置好后，把颜色改为透明*/
    position: absolute;
    left: 0;
    top: 0;
    clip-path: ellipse(100px 100px at 0% 50%);/*直径为100px的正圆形，位置为水平最左，垂直中间*/
    animation: spotlight 5s infinite;/*加载动画，5s 无限循环*/
    background-image: url(./spotlight.jpg);/*添加渐变色的背景图*/
    background-size: 150%;
    background-position: center center;
    -webkit-background-clip: text;/*以区块内的文字裁剪*/
    background-clip: text;
}

/*正圆形画完后，用animation动态的改变正圆形位置就可以实现效果了*/
@keyframes spotlight{
    0% {
        clip-path: ellipse(100px 100px at 0% 50%);
    }
    50% {
        clip-path: ellipse(100px 100px at 100% 50%);
    }
    100% {
        clip-path: ellipse(100px 100px at 0% 50%);
    }
}
